<template>
	<view class="car">
		<view class="car-wrapper">
			<view class="car-bg">
				<view style="padding: 34px 18px 0 18px; height: 201px;">
					<view style="padding: 22px 22px;">
						<view class="car-user">
							<image src="../../../static/images/daihukuan.png"></image>
							<view class="car-name">用户名</view>
						</view>
						<view class="car-main">业主开通绿叶卡即享会员专属权益</view>
					</view>
					<view class="car-time">到期日：2020-10-03</view>
				</view>
			</view>
		</view>
		<view style="background-color: #fff;padding-top: 50px;margin-top: -25px;">
			<view class="fit-wrapper">
				<view class="fit-left"></view>
				<view class="fit-title">三大权益</view>
				<view class="fit-right"></view>
			</view>
			<view class="fit-list">
				<view class="fit-item">
					<image src='../../../static/images/lv1.png'></image>
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">专属标识</view>
						<view style="font-size: 12px;color: #969993;">可以得到专属会员标识</view>
					</view>
				</view>
				<view class="fit-item">
					<image src='../../../static/images/lv2.png'></image>
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">专属标识</view>
						<view style="font-size: 12px;color: #969993;">可以得到专属会员标识</view>
					</view>
				</view>
				<view class="fit-item">
					<image src='../../../static/images/lv3.png'></image>
					<view class="item-text">
						<view style="font-size: 15px;color: #30362A;">专属标识</view>
						<view style="font-size: 12px;color: #969993;">可以得到专属会员标识</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 10px 20px;color: #999999;font-size: 13px;">
			<text style="color: #426FB6;">申请退卡</text>审核成功后系统将在1~2个工作日内把押金返回至
			您的账户；<br/>
			如有疑问请<text style="color: #333333">联系客服</text>
		</view>
		<view class="fit-but-wrapper">
			<view class="fit-but" @click="hanldReturnCard()">开通会员卡</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			hanldReturnCard(){
				uni.navigateTo({
					url: '../returnTheCard/returnTheCard'
				});
			}
		}
	}
</script>

<style scoped>
	.car{
		background-color: #F9F9F9;
	}
	.car-wrapper{
		display: flex;
	}
	.car-user{
		display: flex;
		flex-direction: row;
		    align-items: center;
	}
	.car-user image{
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}
	.car-bg{
		display: flex;
		flex-direction: column;
		background-image: url('../../../static/images/lvye.png');
		height: 198px;
		    width: 100%;
		    background-repeat: no-repeat;
		    position: relative;
		    /* top: 26px; */
		    /* margin: 0px 17px 0 17px; */
		    /* border-radius: 10px; */
		    background-position: center;
		    background-size: 100% 100%;
	}
	.car-name{
		color: #1E4335;
		font-size: 16px;
		margin-left: 12px;
	}
	.car-main{
		color: #378A45;
		margin-top: 6px;
	}
	.car-time{
	color: #378A45;
	    width: 100%;
	    height: 35px;
	    margin-top: 25px;
	    line-height: 35px;
	    padding-left: 26px;
	    border-top: 1px solid #72CC9E;
	}
	.fit-title{
		color: #30362A;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		    padding: 0 8px;
	}
	.fit-wrapper{
		display: flex;
		    align-items: center;
		    justify-content: center;
	}
.fit-left{
	width:24px;
	height:3px;
	background:linear-gradient(90deg,rgba(103,197,120,0.1) 0%,rgba(103,197,120,1) 100%);
}
.fit-right{
	width:24px;
	height:3px;
	background:linear-gradient(90deg,rgba(103,197,120,1) 0%,rgba(103,197,120,0.1) 100%);
}
.fit-list{
	display: flex;
	flex-direction: column;
	padding-bottom: 15px;
}
.fit-item{
	display: flex;
	flex-direction: row;
	    align-items: center;
		margin: 10px 18px;
}
.fit-item image{
	width: 33px;
	height: 33px;
}	
.fit-text{
	display: flex;
	flex-direction: column;
}
.item-text{
	margin-left: 12px;
}
.fit-but-wrapper{
	position: fixed;
	bottom: 0px;
	background-color: #fff;
	height: 81px;
	width: 100%;
}
.fit-but{
	font-size:16px;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:22px;
	width:341px;
	height:44px;
	background:rgba(255,95,73,1);
	border-radius:20px;
	text-align: center;
	line-height: 44px;
	margin: 5px 17px;
}
</style>
